<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="test">
    <!-- 
      v-if="表达式"
      v-show="表达式"
          如果表达式的结果为真, 显示, 否则不显示

      区别:
        隐藏: v-if会干掉标签对象, v-show通过样式来隐藏
        重新再显示: v-if重新创建标签对象来显示, v-show不需要创建标签对象, 只需要修改样式来显示
        结论: v-show重新显示时效率高一些, 但隐藏时占用了更大内存  
          ==> 以空间换时间: 以更大的空间占用, 换取更快的执行
        适用场景:
          v-show: 频繁切换显示隐藏/显示隐藏的结构比较大
          v-if: 当读取显示一个三层表达式(a.b.c), 如果a的值是空对象, 初始显示时会报错, 必须用v-if来处理
        v-if="表达式"与v-show="表达式"
          如果表达式的值为false, v-show依然会解析模板(就会解析表达式), v-if不会解析模板(不会解析表达式)
     -->

    <h3 v-if="isOk">只有isOk为true才显示 v-if</h3>

    <button @click="update">更新</button>

    <h3 v-show="isOk">只有isOk为true才显示 v-show</h3>

    <ul v-if="product.address"> <!-- 不能用v-show -->
      <li>商品的产地城市: {{product.address.city}}</li>
      <li>商品的产地具体地址: {{product.address.name}}</li>
    </ul>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const vm = new Vue({
      el: "#test",
      data: {
        isOk: true,
        product: {}
      },
      methods: {
        update () {
          this.isOk = !this.isOk
        }
      }
    })

    setTimeout(() => {
      vm.product = {
        address: {
          name: '尚硅谷',
          city: '武汉'
        }
      }
    }, 1000);
  </script>
</body>
</html>